<template>
  <div class="common-layout">
    <el-container>
      <el-header class="common-header">公告信息</el-header>
      <el-main>
        <el-table :data="notices" style="width: 100%" max-height="550">
          <el-table-column fixed prop="id" label="id" width="50" />
          <el-table-column prop="content" label="内容" width="600" />
          <el-table-column
            prop="publish_time"
            label="创建时间"
            :formatter="formatTime"
            width="200"
          />
          <el-table-column
            prop="update_time"
            label="修改时间"
            :formatter="formatTime"
            width="200"
          />
          <el-table-column
            prop="is_deleted"
            label="状态"
            :formatter="isDeletedFormatter"
            width="200"
          />
          <el-table-column fixed="right" label="操作" min-width="60">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="large"
                @click.prevent="updateRow(scope.row)"
              >
                修改状态
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button class="mt-4" style="width: 100%" @click="addNotice = true">
          新增公告
        </el-button>
      </el-main>
    </el-container>
  </div>
  <!-- 弹出窗 -->
  <div>
    <el-dialog v-model="addNotice" title="新增公告" width="500" center>
      <div>
        <el-form
          ref="noitceRef"
          :model="form"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="公告内容" prop="content">
            <el-input v-model="form.content" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addNotice = false">取消</el-button>
          <el-button type="primary" @click="addNoticeSubmit">
            确认新增
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
<script setup>
import { ref, defineProps, onMounted } from "vue";
import requestUtil from "../../utils/request";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import qs from "qs";


// 公告列表
const notices = ref([]);
// 新增公告列表加载方法
const loadNotices = async () => {

  try {
    let result = await requestUtil.post(
      "notice/select?",
      qs.stringify({
      })
    );
    const data = result.data;
    if (data.code === 200) {
        console.log(data.notices);
      notices.value = data.notices;
    } else {
      ElMessage.error("数据加载失败：" + data.info);
    }
  } catch (error) {
    ElMessage.error("请求失败：" + error.message);
  }
};
// 状态转换方法
const isDeletedFormatter = (row) => {
  return row.is_deleted === false ? "启用" : "不启用";
};

// 统一时间格式化方法
const formatTime = (row, column, cellValue) => {
  return dayjs(cellValue).format("YYYY-MM-DD HH:mm:ss");
};
// 修改公告状态
const updateRow =async (row) => {
    
    try {
    let result = await requestUtil.post(
      "notice/operate?",
        qs.stringify({
        id: row.id,
        content:row.content,
        is_deleted:row.is_deleted === false ? 1 : 0
      })
    )
    
    if (result.data.code === 200) {
      ElMessage.success(result.data.info)
      loadNotices() // 重新加载数据
    } else {
      ElMessage.error(result.data.info)
    }
  } catch (error) {
    ElMessage.error("请求失败：" + error.message)
  }
};

// 添加公告弹出窗
const addNotice = ref(false);
//新增公告的表单数据
const noitceRef = ref(null);
const form = ref({
  id: -1,
  is_deleted:0,
  content: "",
});
// 表单检测
const rules = ref({
  content: [{ required: true, message: "不能为空", trigger: "blur" }],
});
//新增公告的提交事件 当id为-1时，为添加，否则为修改
const addNoticeSubmit = () => {
  noitceRef.value.validate(async (valid) => {
    if (valid) {
      // 发送新增公告请求
      let result = await requestUtil.post(
        "notice/operate?",
        qs.stringify(form.value)
      );
      let data = result.data;
      if (data.code == 200) {
        notices.value = data.notices;
        addNotice.value = false;
        ElMessage.success(data.info);
        // 重置表单
        noitceRef.value.resetFields();
      } else {
        ElMessage.error(data.info);
      }
    }
  });
};

// 页面加载时加载公告列表
onMounted(() => {
  loadNotices();
});

</script>
  
<style scoped>
.common-header {
  text-align: center;
  margin: 5px;
  font-size: 30px;
  color: rgb(44, 47, 245);
}
</style>